<template>
  <div class="bigbox">
    <div id="topbd">
      <h1>反内卷管理平台</h1>
      <p>卷！！！！</p>
    </div>

    <a-form ref="formRef" :model="form" :style="{width:'400px'}" id="bd">
      <a-form-item field="name">
        <a-input v-model="form.name" placeholder="请输入用户名..." />
      </a-form-item>
      <a-form-item field="post">
        <a-input v-model="form.post" placeholder="请输入密码..." />
      </a-form-item>
      <a-form-item field="isRead">
        <a-checkbox v-model="form.isRead">
          用户协议
        </a-checkbox>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="handleClick">登录</a-button>
      </a-form-item>
    </a-form>

  </div>
</template>



<script>
  import { ref, reactive } from 'vue';
  import { login } from "@/api/login";
  import { useRouter, useRoute } from 'vue-router'
  import { useLog } from "@/store/login"
  export default {
    setup() {
      const router = useRouter()
      const route = useRoute()
      const formRef = ref()
      const log = useLog();
      let lod = ref()
      const form = reactive({
        name: "admin",
        post: "123456",
        isRead: false,

      })

      const handleClick = () => {
        if (form.name == null || form.post == null || form.isRead == false) {
          formRef.value.setFields({
            name: {
              status: 'error',
              message: '错了错了！！！'
            },
            post: {
              status: 'error',
              message: '错了错了！！！'
            }
          })

        } else {
          lod = true;
          login(form.name, form.post)
            .then((response) => {
              console.log("response", response);
              router.push("/index/monitoring");
              log.token = response.data.token
            })
            .finally(() => {
              lod = false;
            });
        }


      }

      return {
        formRef,
        log,
        form,
        handleClick
      }
    },
  }
</script>



<style scoped>
  .bigbox {
    width: 500px;
    height: 500px;
    border: 2px solid #93b5cf;
    /* background-color: ; */
    box-shadow: 10px 5px 5px #93b5cf;

    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }
  h1 {
    color: var(--color-text-1);
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
  }
  p {
    color: var(--color-text-3);
    font-size: 16px;
    line-height: 24px;
  }
  #topbd {
    margin-left: 90px;
    margin-top: 100px;
  }
</style>